<template>
	<view class="common-question-wrapper">
		<view class="input-box flex-center-between">
			<input v-model="searchVal" class="input flex-1" type="text" placeholder="请输入关键字"/>
			<view class="search-icon flex-center-center" @click="search"></view>
		</view>
		<view class="question-list flex-center-between flex-wrap">
			<view class="question-item" v-for="(item, index) in questionList" :key="item.id">
				<view class="question">
					A：{{ item.question }}
				</view>
				<view class="answer">
					Q：{{ item.answer }}
				</view>
			</view>
		</view>
		
		<empty v-if="noData" class="empty-data"></empty>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	
	const searchVal = ref('');
	const noData = ref(false);
	let questionList = ref([
		{
			id: 1,
			question: '回收后可以获得那些奖励？',
			answer: '衣物回收：五公斤起，回收后可以获得红包奖励。书籍回收...'
		},
		{
			id: 2,
			question: '回收后可以获得那些奖励？',
			answer: '衣物回收：五公斤起，回收后可以获得红包奖励。书籍回收...'
		},
		{
			id: 3,
			question: '回收后可以获得那些奖励？',
			answer: '衣物回收：五公斤起，回收后可以获得红包奖励。书籍回收...'
		},
		{
			id: 4,
			question: '回收后可以获得那些奖励？',
			answer: '衣物回收：五公斤起，回收后可以获得红包奖励。书籍回收...'
		},
		{
			id: 5,
			question: '回收后可以获得那些奖励？',
			answer: '衣物回收：五公斤起，回收后可以获得红包奖励。书籍回收...'
		}
	]);
	
	const search = ()=>{
		const params = {
			//....
		}
	}
</script>

<style lang="scss" scoped>
	.common-question-wrapper{
		padding:30rpx;
		.input-box{
			height: 70rpx;
			margin-bottom: 20rpx;
			.input{
				height: 100%;
				padding:0 20rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				border-radius: 10rpx 0 0 10rpx;
				color:#222;
				background-color: #fff;
				&::placeholder{
					font-size: 28rpx;
					color:#888;
				}
			}
			.search-icon{
				width:100rpx;
				height: 100%;
				font-size: 28rpx;
				border-radius: 0 10rpx 10rpx 0;
				background:#ffc903 url('~@/static/icon/search.png') no-repeat center/contain;
				background-size: 38%;
			}
		}
		.question-list {
			.question-item {
				padding:30rpx;
				margin-bottom: 15rpx;
				font-size: 28rpx;
				border-radius: 15rpx;
				background-color: #fff;
				&:last-child{
					margin-bottom: 0;
				}
				.question {
					margin-bottom: 10rpx;
				}
				.answer {
					font-size: 24rpx;
					color: #777;
				}
			}
		}
		
		.empty-data{
			margin-top: 300rpx;
		}
	}
</style>
